<template>
  <div>
    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
      <el-form-item label="图书标题" prop="name">
        <el-input clearable v-model="ruleForm.name"></el-input>
      </el-form-item>
        <el-form-item label="商品图片" prop="picture">
          <!-- show-file-list 是否显示已上传文件列表 auto-upload是否在选取文件后立即进行上传 -->
          <el-upload
              action="http://localhost:8080/upload/imgs"
              name="picFile"
              :limit=1
              list-type="picture-card"
              :on-preview="handlePictureCardPreview"
              :on-success="handleSuccess">
            <i class="el-icon-plus"></i>
          </el-upload>
          <el-dialog :visible.sync="dialogVisible">
            <img width="100%" :src="dialogImageUrl" alt="">
          </el-dialog>
        </el-form-item>
      <el-form-item label="定价" prop="fixed">
        <el-input v-model.number="ruleForm.fixedPrice" style="width: auto"></el-input>
      </el-form-item>
      <el-form-item label="折扣价" prop="discount">
        <el-input v-model.number="ruleForm.discountPrice" style="width: auto"></el-input>
      </el-form-item>
      <el-form-item label="库存" prop="save">
        <el-input v-model.number="ruleForm.saveCount" style="width: auto"></el-input>
      </el-form-item>
      <el-form-item label="作者" prop="author">
        <el-input v-model="ruleForm.author" style="width: auto"></el-input>
      </el-form-item>
      <el-form-item label="出版社" prop="publishing">
        <el-input v-model="ruleForm.publishing" style="width: auto"></el-input>
      </el-form-item>
      <el-form-item label="版次" prop="edition">
        <el-input v-model="ruleForm.edition" style="width: auto"></el-input>
      </el-form-item>
      <el-form-item label="页数" prop="pages">
        <el-input v-model.number="ruleForm.totalPage" style="width: auto"></el-input>
      </el-form-item>
      <el-form-item label="ISBN编码" prop="isbn">
        <el-input v-model="ruleForm.isbn" style="width: auto"></el-input>
      </el-form-item>
      <el-form-item label="选择分类" prop="category">
        <el-cascader
            placeholder="试试搜索：小说"
            :options="options"
            filterable
            clearable
            v-model="ruleForm.categoryId"></el-cascader>
      </el-form-item>
      <el-form-item label="装帧方式" prop="bind">
        <el-select v-model="ruleForm.bindLayout" placeholder="请选择装帧方式">
          <el-option label="精装" value="jingzhuang"></el-option>
          <el-option label="平装" value="pingzhuang"></el-option>
          <el-option label="套装" value="taozhuang"></el-option>
          <el-option label="盒装" value="hezhuang"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="出版时间" required>
        <el-col :span="11">
          <el-form-item prop="date">
            <el-date-picker type="date" placeholder="选择日期或输入 xxxx-xx-xx"
                            v-model="ruleForm.publishTime" style="width: 100%;"></el-date-picker>
          </el-form-item>
        </el-col>
      </el-form-item>
      <el-form-item label="开本规格" prop="size">
        <el-radio-group v-model="ruleForm.bookSize">
          <el-radio :label="64">64开本92×126（mm）</el-radio>
          <el-radio :label="32">32开本130×184（mm）</el-radio>
          <el-radio :label="24">24开本182*196（mm）</el-radio>
          <el-radio :label="16">16开本188×265（mm）</el-radio>
          <el-radio :label="12">12开本273×262.3（mm）</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="语种选择" prop="language">
        <el-radio-group v-model="ruleForm.language">
          <el-radio label="中文"></el-radio>
          <el-radio label="英语"></el-radio>
          <el-radio label="日语"></el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="商品描述" prop="desc">
        <el-input type="textarea" v-model="ruleForm.description"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="add('ruleForm')">立即上架</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import axios from "axios";

export default {
  data() {
    return {
      dialogImageUrl: '',
      dialogVisible: false,
      ruleForm: {
        name: '',
        url: '',
        fixedPrice: '',
        discountPrice: '',
        saveCount: '',
        author: '',
        publishing: '',
        edition: '',
        totalPage: '',
        isbn: '',
        categoryId: '',
        bindLayout: '',
        publishTime: '',
        bookSize: '',
        language: '',
        description: '',
      },
      options: [{/*01*/
        value: 'wenxuezonghe',
        label: '文学综合',
        children: [{
          value: 'xiaoshuo',
          label: '小说'
        }, {
          value: 'wenxue',
          label: '文学'
        }, {
          value: 'zhuanji',
          label: '传记'
        }, {
          value: 'qingchunwenxue',
          label: '青春文学'
        }, {
          value: 'kehuan',
          label: '科幻'
        }, {
          value: 'xuanyi',
          label: '悬疑'
        }, {
          value: 'sanwen',
          label: '散文'
        }]
      }],
      rules: {
        name: [
          {required: true, message: '请输入商品名称', trigger: 'blur'},
        ],
        url: [
          {required: true, message: '请上传图片', trigger: 'change'}
        ],
        fixedPrice: [
          {required: true, message: '请输入商品定价', trigger: 'blur'},
          {type: 'number', message: '价格必须为数字值'}
        ],
        discountPrice: [
          {required: true, message: '请输入商品折扣价', trigger: 'blur'},
          {type: 'number', message: '价格必须为数字值'}
        ],
        saveCount: [
          {required: true, message: '库存不能为空', trigger: 'blur'},
          {type: 'number', message: '价格必须为数字值'}
        ],
        author: [
          {required: true, message: '必须添加作者信息', trigger: 'blur'},
        ],
        publishing: [
          {required: true, message: '出版社不能为空', trigger: 'blur'},
        ],
        edition: [
          {required: true, message: '此项不能为空', trigger: 'blur'},
        ],
        totalPage: [
          {type: 'number', message: '必须填入数字值'},
        ],
        isbn: [
          {required: true, message: '请添加ISBN编码', trigger: 'blur'},
        ],
        categoryId: [
          {required: true, message: '请选择商品分类', trigger: 'change'}
        ],
        bindLayout: [
          {required: true, message: '请选择装帧信息', trigger: 'change'}
        ],
        publishTime: [
          {type: 'date', required: true, message: '请选择日期', trigger: 'change'}
        ],
        bookSize: [
          {required: true, message: '请至少选择一个开本规格', trigger: 'change'}
        ],
        language: [
          {required: true, message: '请选择语种类型', trigger: 'change'}
        ],
        description: [
          {required: true, message: '请填写商品描述信息', trigger: 'blur'}
        ]
      },
    }
  },
  created() {
    let url = 'http://localhost:8080/categories/get/tree'
    axios.get(url).then((response) => {
      let json = response.data
      if (json.state == 20000) {
        this.options = json.data
      }
    })
  },
  methods: {
    add(formName) {
      this.$refs[formName].validate((valid) => { // 表单验证
        if (valid) {
          this.ruleForm.categoryId = this.ruleForm.categoryId[1]
          console.log(this.ruleForm)
          let url = 'http://localhost:8080/products/add'
          axios.post(url, this.ruleForm).then((response) => {
            let json = response.data
            if (json.state == 20000) {
              this.$message.success('上架成功');
            }
          })
        }
      });
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    handleSuccess(response,file,fileList){
      console.log("文件上传完成,图片名="+response)
      this.ruleForm.url = response
    },
  }
}
</script>

<style>

</style>